<!--  -->
<template>
  <el-container>
    <el-header>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#fff" text-color="#333" active-text-color="#c32136">
        <el-menu-item index="1" @click="changeIndex('1')">专辑</el-menu-item>
        <el-menu-item index="2" @click="changeIndex('2')">歌手</el-menu-item>
        <el-menu-item index="3" @click="changeIndex('3')">视频</el-menu-item>
        <el-menu-item index="4" @click="changeIndex('4')">专栏</el-menu-item>
      </el-menu>
    </el-header>
    <AblumCollect v-show="activeIndex === '1'"></AblumCollect>
    <SingerCollect v-show="activeIndex === '2'"></SingerCollect>
    <VideoCollect v-show="activeIndex === '3'"></VideoCollect>
    <ColumnCollect v-show="activeIndex === '4'"></ColumnCollect>

  </el-container>
</template>

<script>
import { getAblumCollect } from 'util/collect.js'

import AblumCollect from '@/components/leftNav/myCollect/AblumCollect.vue'
import SingerCollect from '@/components/leftNav/myCollect/SingerCollect.vue'
import VideoCollect from '@/components/leftNav/myCollect/VideoCollect.vue'
import ColumnCollect from '@/components/leftNav/myCollect/ColumnCollect.vue'
export default {
  name: '',
  components: {
    AblumCollect,
    SingerCollect,
    VideoCollect,
    ColumnCollect
  },
  data() {
    return {
      activeIndex:'1'
    }
  },
  created() {
  },
  methods: {
    changeIndex(index){
      this.activeIndex = index
    }
  }
}
</script>

<style scoped>
.el-header {
  padding: 0;
}
.el-main {
  padding: 0;
}
.el-menu-demo{
  width: 100%;
  position: fixed;
  z-index: 99;
}
</style>